
<!--<!DOCTYPE html>-->
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
<!--    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">-->
<!--    <title> 中药管理 </title>-->
<!--    <link rel="stylesheet" type="text/css" href="/css/style.css" />-->

<!--    <style type="text/css">-->
<!--        *, body {-->
<!--            margin: 0px;-->
<!--            font-family: '微软雅黑',serif;-->
<!--        }-->
<!--    </style>-->
<!--    <script src="/js/jquery-1.10.2.min.js"></script>-->
<!--    <script src="/js/generic.js"></script>-->
<!--    <script src="/js/fypage.js"></script>-->
<!--</head>-->

<!--<body>-->
<!--    <table class="maintable"style="width:100%">-->
<!--        <tr>-->
<!--            <td class="rightmaintd" valign="top">-->
<!--                <div style="height:40px;text-align:center;background-color:#009966">-->
<!--                    <p style="font-weight:bold;padding-top:10px;font-size:larger;color:white">中药库</p>-->
<!--                </div>-->
<!--                <div class="searchdiv">-->
<!--                    <input type="button" id="btnAdd"  value="+添加中药" class="xinzengbtn" onclick="create()">-->
<!--                    <input type="button" value="+批量添加" class="xinzengbtn" onclick="window.location.href='/zyxx/batchAdd'">-->
<!--                    <label>&nbsp;年级：&nbsp;</label>-->
<!--                    <select id="gradeSelect" onchange="changeGradeFun();">-->
<!--                        <option value="" id="gradeNone">请选择</option>-->
<!--                        <option th:each="Id : ${yonghuId}" th:value="${Id}" th:text="${Id}">Id</option>-->
<!--                    </select>-->
<!--                    <label>&nbsp;班级：&nbsp;</label>-->
<!--                    <select id="classSelect" onchange="changeClassFun();">-->
<!--                        <option value="" id="classNone">请选择</option>-->
<!--                        <option th:each="Cop : ${yonghuCompany}" th:value="${Cop}" th:text="${Cop}">Id</option>-->
<!--                    </select>-->
<!--                    <div class="rightsearchdiv">&lt;!&ndash; name &ndash;&gt;-->
<!--                        <div class="rightsearchdivtext">-->
<!--                            <input type="text" id="keyword1" class="nobodertext" placeholder=" 输入中药名查询" onkeypress="enterKeyPress(event)">-->
<!--                            <input type="text" id="keyword2" class="nobodertext" placeholder=" 输入录入人查询" onkeyPress="enterKeyPress(event)">-->
<!--                            <button class="searchbtn" onclick="search()" >-->
<!--                                <img src="/images/fdj.png" alt="" class="searchfdj">-->
<!--                            </button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <table class="neirontbiao" id="tbl_list" style="width:100%">-->
<!--                    <tr>-->
<!--                        &lt;!&ndash;          <td>id</td><td>省</td><td>市</td><td>地域</td><td>流域</td><td>创建者</td>&ndash;&gt;-->
<!--                    </tr>-->
<!--                    <table class="neirontbiao" id="add" style="width: 100%"></table>-->

<!--                </table>-->
<!--                <button id="prevButton">上一页</button>-->
<!--                <button id="nextButton">下一页</button>-->
<!--                每页显示条数：-->
<!--                <select id="pageSizeSelect" onchange="changePageSize();">-->
<!--                    <option value="10">10</option>-->
<!--                    <option value="25">25</option>-->
<!--                    <option value="50" selected>50</option>-->
<!--                    <option value="100">100</option>-->
<!--                    <option value="200">200</option>-->
<!--                </select>-->
<!--                <div class="pagediv" id="pager">-->
<!--                    <label>第-->
<!--                        <input type="text" id="page" width="5px" onkeypress="pageSearch(event)">-->
<!--                        页-->
<!--                    </label>-->
<!--                    <input type="button" value="跳转" onclick="pageOn()">-->
<!--                    <p id="sumPageId">place</p>-->
<!--                </div>-->

<!--            </td>-->
<!--        </tr>-->
<!--    </table>-->


<!--</body>-->
<!--</html>-->
<!--<script>-->
<!--    function start(){-->
<!--        var xhr = new XMLHttpRequest();-->
<!--        xhr.open('GET', '/zyxx/', true);-->
<!--        xhr.onreadystatechange = function() {-->
<!--            if (xhr.readyState === 4 && xhr.status === 200) {-->
<!--                dataSource = JSON.parse(xhr.responseText);-->
<!--                data = JSON.parse(JSON.stringify(dataSource));-->
<!--                console.log(data);-->
<!--                renderData();-->
<!--            }-->
<!--        };-->
<!--        xhr.send();-->
<!--    }-->
<!--    var searchValue1=document.getElementById('keyword1');-->
<!--    var searchValue2=document.getElementById('keyword2');-->
<!--    var changeGrade=document.getElementById('gradeSelect');-->
<!--    var changeClass=document.getElementById('classSelect');-->
<!--    var pageChage=document.getElementById('page');-->
<!--    var sumPageShow=document.getElementById('sumPageId');-->
<!--    var pageSize = 50; // 每页显示的数据量-->
<!--    var currentPage = 1; // 当前页码-->
<!--    var dataRender=[];  //每页显示的数据，是数据-->
<!--    var pageSum=0;  //总共的页数-->
<!--    var dataSource=[];   //一共有的json数据，源数据-->
<!--    var data=[];  // 操作的数据，防止错误，可以由源数据赋值-->

<!--    // 使用AJAX请求获取JSON数据-->
<!--    start();-->
<!--    function renderData(){    //渲染页面函数-->
<!--        pageSum=Math.ceil(data.length/(pageSize));-->
<!--        dataRender=data.slice((currentPage-1)*pageSize,pageSize*currentPage);-->
<!--        var container = document.getElementById('tbl_list');-->
<!--        var html = '<tr class="neirontbiaotou"><th width="15%">中药名</th><th width="8%">性</th><th width="10%">味</th><th width="15%">归经</th><th width="25%">功能</th><th width="10%">录入人</th><th width="6%">审核</th><th>操作</th></tr>';-->
<!--        if (dataRender.length == 0) {-->
<!--            html += '<tr><td colspan="7" style="text-align:center;height:50px;">暂无中药信息</td></tr>';-->
<!--        }-->
<!--        for (var i = 0; i < dataRender.length; i++) {-->
<!--            var item = dataRender[i];-->
<!--            html += '<tr>';-->
<!--            html += '<td>' + item.yaoming + '</td>';-->
<!--            html += '<td>' + item.xing + '</td>';-->
<!--            html += '<td>' + item.wei + '</td>';-->
<!--            html += '<td>' + item.guijing + '</td>';-->
<!--            html += '<td>' + item.gongneng + '</td>';-->
<!--            html += '<td>' + item.createuser + '</td>';-->
<!--            html += '<td>' + item.shenhe + '</td>';-->
<!--            html += '<td>' + '<a href="javascript:update(\'' + item.id + '\')">编辑</a>&nbsp;<a style=";color:#0c531f" href="javascript:deleteD(\'' + item.id + '\')">删除</a>' + '</td></tr>';-->
<!--        }-->
<!--        pageChage.value=currentPage;-->
<!--        sumPageShow.textContent="共 "+pageSum+" 页";-->
<!--        container.innerHTML = html;-->
<!--    }-->
<!--    function nextOrPreOnClick(){-->
<!--        //上一页-->
<!--        var prevButton = document.getElementById('prevButton');-->
<!--        prevButton.addEventListener('click', function() {-->
<!--            currentPage&#45;&#45;;-->
<!--            if(currentPage==0)-->
<!--                currentPage=pageSum;-->
<!--            renderData();-->

<!--        });-->

<!--        // 下一页按钮点击事件处理函数-->
<!--        var nextButton = document.getElementById('nextButton');-->
<!--        nextButton.addEventListener('click', function() {-->
<!--            currentPage=(++currentPage)%pageSum;-->
<!--            currentPage=currentPage==0?pageSum:currentPage;-->
<!--            renderData();-->
<!--        });-->
<!--    }-->
<!--    function changePageSize(){-->
<!--        var pageSizeSelect = document.getElementById('pageSizeSelect');-->
<!--        pageSize = parseInt(pageSizeSelect.value);-->
<!--        currentPage=1;-->
<!--        renderData();-->
<!--    }-->
<!--    nextOrPreOnClick();-->
<!--    function search() {-->
<!--        currentPage = 1;-->
<!--        data = [];-->
<!--        var inputVal1 = searchValue1.value.toUpperCase();-->
<!--        var inputVal2 = searchValue2.value.toUpperCase();-->
<!--        if (inputVal1 == ""&&inputVal2=="") {-->
<!--            data = JSON.parse(JSON.stringify(dataSource));-->
<!--        }-->
<!--        else {-->
<!--            for (var i = 0; i < dataSource.length; i++) {-->
<!--                if (dataSource[i].yaoming.toUpperCase().includes(inputVal1)  && dataSource[i].createuser.toUpperCase().includes(inputVal2) ) {-->
<!--                    data.push(dataSource[i]);-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--        renderData();-->
<!--    }-->
<!--    function enterKeyPress(event) {-->
<!--        // 检查按下的按键是否为回车键，回车键的keyCode是13-->
<!--        if (event.keyCode === 13) {-->
<!--            search();-->
<!--        }-->
<!--    }-->
<!--    function create(){-->
<!--        window.location.href="/zyxx/create";-->
<!--    }-->
<!--    function update(userid){-->
<!--        window.location.href = "/zyxx/edit/" + userid;-->
<!--    }-->
<!--    function deleteD(userid){-->
<!--        var result=confirm("确认删除当前内容吗？");-->
<!--        if(result){-->
<!--            // 发送 DELETE 请求-->
<!--            fetch('/zyxx/'+userid, {-->
<!--                method: 'DELETE',-->
<!--                headers: {-->
<!--                    'Content-Type': 'application/json' // 可根据实际情况设置请求头-->
<!--                },-->
<!--            })-->
<!--                .then(response => {-->
<!--                    if (response.ok) {-->
<!--                        alert("删除成功！");-->
<!--                        start();-->
<!--                        renderData();-->
<!--                    } else {-->
<!--                        alert("发生错误，删除失败！");-->
<!--                    }-->
<!--                })-->
<!--                .catch(error => {-->
<!--                    // 捕获网络错误等异常-->
<!--                    alert("网络错误，删除失败！");-->
<!--                });-->

<!--        }-->
<!--    }-->
<!--    function pageSearch(event) {-->
<!--        // 检查按下的按键是否为回车键，回车键的keyCode是13-->
<!--        if (event.keyCode === 13) {-->
<!--            pageOn();-->
<!--        }-->
<!--    }-->
<!--    function pageOn(){-->
<!--        var afterPage=pageChage.value;-->
<!--        if(afterPage<1||afterPage>pageSum){-->
<!--            alert("输入的页码错误！");-->
<!--            return;-->
<!--        }-->
<!--        currentPage=afterPage;-->
<!--        renderData();-->
<!--    }-->
<!--    function changeGradeFun(){-->
<!--        var val=changeGrade.value.toUpperCase();-->
<!--        currentPage = 1;-->
<!--        data = [];-->
<!--        if (val== "") {-->
<!--            data = JSON.parse(JSON.stringify(dataSource));-->
<!--        }-->
<!--        else {-->
<!--            for (var i = 0; i < dataSource.length; i++) {-->
<!--                if (dataSource[i].createuser.substring(0,4).toUpperCase().includes(val) ) {-->
<!--                    data.push(dataSource[i]);-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--        document.getElementById('classNone').selected=true;-->
<!--        renderData();-->
<!--    }-->
<!--    function changeClassFun(){-->
<!--        var val=changeClass.value;-->
<!--        currentPage = 1;-->
<!--        data = [];-->
<!--        console.log(dataSource);-->
<!--        if (val== "") {-->
<!--            data = JSON.parse(JSON.stringify(dataSource));-->
<!--        }-->
<!--        else {-->
<!--            for (var i = 0; i < dataSource.length; i++) {-->
<!--                if (dataSource[i].company.toUpperCase().includes(val) ) {-->
<!--                    data.push(dataSource[i]);-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--        document.getElementById('gradeNone').selected=true;-->
<!--        renderData();-->
<!--    }-->
<!--</script>-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 中药管理 </title>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />

    <style type="text/css">
        *, body {
            margin: 0px;
            font-family: '微软雅黑',serif;
        }
    </style>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/generic.js"></script>
    <script src="/js/fypage.js"></script>
</head>

<body>
<table class="maintable"style="width:100%">
    <tr>
        <td class="rightmaintd" valign="top">
            <div style="height:40px;text-align:center;background-color:#009966">
                <p style="font-weight:bold;padding-top:10px;font-size:larger;color:white">中  药  库</p>
            </div>
            <div class="searchdiv">
                <input type="button" id="btnAdd"  value="+添加中药" class="xinzengbtn" onclick="create()">
                <input type="button" value="+批量添加" class="dlxinzengbtn" onclick="window.location.href='/zyxx/batchAdd'">
                <label>&nbsp;年级：&nbsp;</label>
                <select id="gradeSelect" onchange="changeGradeFun();">
                    <option value="" id="gradeNone">请选择</option>
                    <option th:each="Id : ${yonghuId}" th:value="${Id}" th:text="${Id}">Id</option>
                </select>
                <label>&nbsp;班级：&nbsp;</label>
                <select id="classSelect" onchange="changeClassFun();">
                    <option value="" id="classNone">请选择</option>
                    <option th:each="Cop : ${yonghuCompany}" th:value="${Cop}" th:text="${Cop}">Id</option>
                </select>
                <div class="rightsearchdiv"><!-- name -->
                    <div class="rightsearchdivtext">
                        <input type="text" id="keyword1" class="nobodertext" placeholder=" 输入中药名查询" onkeypress="enterKeyPress(event)">
                        <input type="text" id="keyword2" class="nobodertext" placeholder=" 输入录入人查询" onkeyPress="enterKeyPress(event)">
                        <button class="searchbtn" onclick="zysearch()" >
                            <img src="/images/fdj.png" alt="" class="searchfdj">
                        </button>
                    </div>
                </div>
            </div>
            <table class="neirontbiao" id="tbl_list" style="width:100%">
                <tr>
                    <!--          <td>id</td><td>省</td><td>市</td><td>地域</td><td>流域</td><td>创建者</td>-->
                </tr>
                <table class="neirontbiao" id="add" style="width: 100%"></table>

            </table>
            <button id="prevButton">上一页</button>
            <button id="nextButton">下一页</button>
            每页显示条数：
            <select id="pageSizeSelect" onchange="changePageSize();">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50" selected>50</option>
                <option value="100">100</option>
                <option value="200">200</option>
            </select>
            <div class="pagediv" id="pager">
                <label>第
                    <input type="text" id="page" width="5px" onkeypress="pageSearch(event)">
                    页
                </label>
                <input type="button" value="跳转" onclick="pageOn()">
                <p id="sumPageId">place</p>
            </div>

        </td>
    </tr>
</table>


</body>
</html>
<script>
    function start(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/zyxx/', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                dataSource = JSON.parse(xhr.responseText);
                dataSource.forEach(function(obj) {
                    for (var key in obj) {
                        if (obj.hasOwnProperty(key) && obj[key] === null) {
                            obj[key] = ''; // 将属性值为 null 的属性替换为空字符串
                        }
                    }
                });
                data = JSON.parse(JSON.stringify(dataSource));
                console.log(data);
                renderData();
            }
        };
        xhr.send();
    }
    var searchValue1=document.getElementById('keyword1');
    var searchValue2=document.getElementById('keyword2');
    var changeGrade=document.getElementById('gradeSelect');
    var changeClass=document.getElementById('classSelect');
    var pageChage=document.getElementById('page');
    var sumPageShow=document.getElementById('sumPageId');
    var pageSize = 50; // 每页显示的数据量
    var currentPage = 1; // 当前页码
    var dataRender=[];  //每页显示的数据，是数据
    var pageSum=0;  //总共的页数
    var dataSource=[];   //一共有的json数据，源数据
    var data=[];  // 操作的数据，防止错误，可以由源数据赋值

    // 使用AJAX请求获取JSON数据
    start();
    function renderData(){    //渲染页面函数
        pageSum=Math.ceil(data.length/(pageSize));
        dataRender=data.slice((currentPage-1)*pageSize,pageSize*currentPage);
        var container = document.getElementById('tbl_list');
        var html = '<tr class="neirontbiaotou"><th width="15%">中药名</th><th width="8%">性</th><th width="10%">味</th><th width="15%">归经</th><th width="25%">功能</th><th width="10%">录入人</th><th width="6%">审核</th><th>操作</th></tr>';
        if (dataRender.length == 0) {
            html += '<tr><td colspan="7" style="text-align:center;height:50px;">暂无中药信息</td></tr>';
        }
        for (var i = 0; i < dataRender.length; i++) {
            var item = dataRender[i];
            html += '<tr>';
            html += '<td>' + item.yaoming + '</td>';
            html += '<td>' + item.xing + '</td>';
            html += '<td>' + item.wei + '</td>';
            html += '<td>' + item.guijing + '</td>';
            html += '<td>' + item.gongneng + '</td>';
            html += '<td>' + item.createuser + '</td>';
            html += '<td>' + item.shenhe + '</td>';
            html += '<td>' + '<a href="javascript:update(\'' + item.id + '\')">编辑</a>&nbsp;<a style=";color:#0c531f" href="javascript:deleteD(\'' + item.id + '\')">删除</a>' + '</td></tr>';
        }
        pageChage.value=currentPage;
        sumPageShow.textContent="共 "+pageSum+" 页";
        container.innerHTML = html;
    }
    function nextOrPreOnClick(){
        //上一页
        var prevButton = document.getElementById('prevButton');
        prevButton.addEventListener('click', function() {
            currentPage--;
            if(currentPage==0)
                currentPage=pageSum;
            renderData();

        });

        // 下一页按钮点击事件处理函数
        var nextButton = document.getElementById('nextButton');
        nextButton.addEventListener('click', function() {
            currentPage=(++currentPage)%pageSum;
            currentPage=currentPage==0?pageSum:currentPage;
            renderData();
        });
    }
    function changePageSize(){
        var pageSizeSelect = document.getElementById('pageSizeSelect');
        pageSize = parseInt(pageSizeSelect.value);
        currentPage=1;
        renderData();
    }
    nextOrPreOnClick();
    function search() {
        currentPage = 1;
        data = [];
        var inputVal1 = searchValue1.value.toUpperCase();
        var inputVal2 = searchValue2.value.toUpperCase();
        if (inputVal1 == ""&&inputVal2=="") {
            data = JSON.parse(JSON.stringify(dataSource));
        }
        else {
            for (var i = 0; i < dataSource.length; i++) {
                if (dataSource[i].yaoming.toUpperCase().includes(inputVal1)  &&(dataSource[i].createuser==null|| dataSource[i].createuser.toUpperCase().includes(inputVal2)) ) {
                    data.push(dataSource[i]);
                }
            }
        }
        renderData();
    }
    function enterKeyPress(event) {
        // 检查按下的按键是否为回车键，回车键的keyCode是13
        if (event.keyCode === 13) {
            search();
        }
    }
    function create(){
        window.location.href="/zyxx/create";
    }
    function update(userid){
        console.log("编辑");
        window.open ("/zyxx/edit/" + userid);
    }
    function deleteD(userid){
        var result=confirm("确认删除当前内容吗？");
        if(result){
            // 发送 DELETE 请求
            fetch('/zyxx/'+userid, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json' // 可根据实际情况设置请求头
                },
            })
                .then(response => {
                    if (response.ok) {
                        alert("删除成功！");
                        start();
                        renderData();
                    } else {
                        alert("发生错误，删除失败！");
                    }
                })
                .catch(error => {
                    // 捕获网络错误等异常
                    alert("网络错误，删除失败！");
                });

        }
    }
    function pageSearch(event) {
        // 检查按下的按键是否为回车键，回车键的keyCode是13
        if (event.keyCode === 13) {
            pageOn();
        }
    }
    function pageOn(){
        var afterPage=pageChage.value;
        if(afterPage<1||afterPage>pageSum){
            alert("输入的页码错误！");
            return;
        }
        currentPage=afterPage;
        renderData();
    }
    function changeGradeFun(){
        var val=changeGrade.value.toUpperCase();
        currentPage = 1;
        data = [];
        if (val== "") {
            data = JSON.parse(JSON.stringify(dataSource));
        }
        else {
            for (var i = 0; i < dataSource.length; i++) {
                if (dataSource[i].createuser.substring(0,4).toUpperCase().includes(val) ) {
                    data.push(dataSource[i]);
                }
            }
        }
        document.getElementById('classNone').selected=true;
        renderData();
    }
    function changeClassFun(){
        var val=changeClass.value;
        currentPage = 1;
        data = [];
        if (val== "") {
            data = JSON.parse(JSON.stringify(dataSource));
        }
        else {
            for (var i = 0; i < dataSource.length; i++) {
                if (dataSource[i].company.toUpperCase().includes(val) ) {
                    data.push(dataSource[i]);
                }
            }
        }
        document.getElementById('gradeNone').selected=true;
        renderData();
    }
</script>